<template>
	<view class="content-header">
		<view class="banner">
			<image src="../../static/index/ban.png" mode="widthFix"></image>
		</view>
		<view class="jiange"></view>
		<view class="goods-info">
			<view class="goods-info-name flex-column">
				<view class="flex-row flex-content-between goods-info-txt">
					<view class="flex-row">
						<view class="goods-info-txt1">￥60</view>
						<view class="goods-info-txt2">￥88</view>
					</view>
					<view class="flex-row">
						<view class="goods-info-txt3">已售500+</view>
					</view>
				</view>
				<view class="goods-info-title">
					<view>鲜活大虾</view>
				</view>
				<view class="flex-column">
					<view class="flex-row goods-info-nt">
						<view>规格</view>
						<view>500g</view>
					</view>
					<view class="flex-row goods-info-nt">
						<view>发货</view>
						<view>24小时内发货</view>
					</view>
				</view>
			</view>
		</view>
		<view class="zhongjian"></view>
		<view >
			<view class="jiange flex-row flex-item-center">
				<image src="../../static/index/zuo.png" mode="scaleToFill"></image>
				<view>商品详情</view>
				<image src="../../static/index/you.png" mode="scaleToFill"></image>
			</view>
		</view>
		<view class="goods-detal">
			<view class="detal">
				<image src="../../static/index/info1.png" mode="widthFix"></image>
				<image src="../../static/index/info2.png" mode="widthFix"></image>
			</view>
		</view>
		<mu-suspension bottom="0">
			<view class="foot">
				<view class="foot-static"></view>
				<view class="flex-row flex-content-between zhfoot">
					<view class="flex-row zhfoot-img">
						<image src="../../static/index/jian1.png" mode="scaleToFill"></image>
						<view>1</view>
						<image src="../../static/index/jia1.png" mode="scaleToFill"></image>
					</view>
					<view class="foot-txt2" @tap="gosubmit">立即购买</view>
				</view>
			</view>
		</mu-suspension>
	</view>
</template>

<script>
	export default{
		data(){
			
		},
		methods:{
			gosubmit(){
				uni.navigateTo({
					url:'/pages/order/createorder'
				})
			}
		}
	}
</script>

<style lang="scss">
	.foot-static{
		width: 100%;
		height: 25rpx;
	}
	.zhfoot-img{
		>image:nth-child(1){
			width: 48rpx;
			height: 48rpx;
		}
		>view:nth-child(2){
			margin-left: 15rpx;
		}
		>image:nth-child(3){
			width: 48rpx;
			height: 48rpx;
			margin-left: 15rpx;
		}
	}
	.foot{
		width: 750rpx;
		height: 168rpx;
		background-color: #FFFFFF;
	}
	.zhfoot{
		// margin-top: 108rpx;
		// padding-top: 108rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		margin-top: 22rpx;
	}
	.foot-txt2{
		width: 236rpx;
		height: 80rpx;
		background: $default-button-color;
		opacity: 1;
		border-radius: 40rpx;
		color: $default-button-foncolor;
		text-align: center;
		line-height: 80rpx;
	}
	.goods-detal{
		margin-left: 30rpx;
		margin-right: 30rpx;
		background-color: #FFFFFF;
		width: 690rpx;
		padding-bottom: 168rpx;
		// height: 800rpx;
	}
	.detal{
		margin-top: 30rpx;
		>image{
			width: 690rpx;
		}
	}
	.zhongjian{
		width: 100%;
		height: 36rpx;
	}
	.jiange{
		margin-left: 52rpx;
		>image{
			width: 256rpx;
			height: 2rpx;
		}
	}
	.goods-info-nt{
		margin-top: 20rpx;
		>view{
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #999999;
			margin-left: 20rpx;
		}
		>view:nth-child(2){
			margin-left: 20rpx;
		}
	}
	.goods-info-title{
		width: 650rpx;
		height: 88rpx;
		border-bottom: 2rpx solid #F4F4F4;
		margin-left: 20rpx;
		padding-top: 25rpx;
		>view{
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}
	}
	.goods-info-txt{
		padding-top: 25rpx;
		padding-left: 12rpx;
		padding-right: 20rpx;
	}
	.goods-info-txt1{
		font-size: 44rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: $default-button-color;
		opacity: 1;
	}
	.goods-info-txt2{
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #CCCCCC;
		text-decoration:line-through;
		line-height: 60rpx;
		margin-left: 30rpx;
	}
	.goods-info-txt3{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #999999;
	}
	.goods-info-name{
		width: 690rpx;
		// height: 350rpx;
		background-color: #FFFFFF;
		// margin-left: 20rpx;
		padding-bottom: 20rpx;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
	}
	.jiange{
		width: 100%;
		height: 20rpx;
	}
	.goods-info{
		margin-left: 30rpx;
		margin-right: 30rpx;
		padding-bottom: 20rpx;
	}
	.banner{
		width: 750rpx;
		>image{
			width: 100%;
		}
	}
</style>